<template>
    <div class="aside" v-if="!$isMobile()">
        <el-menu class="menu-main" router :default-active="route.path" :collapse="isCollapseStore.isCollapse"
            active-text-color="var(--theme-color)">
            <menuItem v-for="item in menuList" :item="item" :key="item.menuId" />
        </el-menu>
    </div>
    <div class="aside" v-else>
        <el-drawer v-model="isCollapseStore.isCollapse" direction="ltr" :show-close="false" size="250px">
            <el-menu router :default-active="route.path" :collapse="false" active-text-color="var(--theme-color)">
                <menuItem v-for="item in menuList" :item="item" :key="item.menuId" />
            </el-menu>
            <template #header>
                <div class="header">
                    <img class="logo" src="../../assets/logo.png" alt="图片无法显示">
                    <span class="title">
                        blue-admin
                    </span>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import menuItem from '@/components/menu-item.vue';
import { useRoute } from "vue-router"
import { onMounted, ref } from "vue";
import api from "../../api"
import { ElMessage } from 'element-plus'
import { useIsCollapseStore } from "@/store/isCollapseStore";


const isCollapseStore = useIsCollapseStore();
const route = useRoute()

let menuList = ref()
function getMenuList() {
    let str = window.localStorage.getItem("access-admin")
    let user = JSON.parse(str)
    api.get('/author/menu/menuList?roleId=' + user.role.roleId).then(res => {
        if (res.data.code === 200) {
            menuList.value = res.data.data
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}
onMounted(() => {
    getMenuList()

})

</script>
<style scoped lang="less">
.aside {
    height: calc(100vh - 50px);
}

:deep(.el-drawer__body) {
    padding: 0 !important;
}

.header {
    background: linear-gradient(200deg, var(--sub-theme-color), var(--theme-color));
    height: 50px;
    width: 100%;
    margin: -20px;
    display: flex;
    align-items: center;
    justify-content: left;

    .logo {
        height: 30px;
        width: 30px;
        margin-right: 15px;
        margin-left: 20px;
    }

    .title {
        line-height: 50px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }
}

.menu-main:not(.el-menu--collapse) {
    width: 250px;
    min-height: 400px;

}
</style>